<el-drawer
    title="菜单管理"
    :visible.sync="create.drawer"
    direction="rtl"
    size="530px"
    :lock-scroll="false"
    custom-class="Va-drawer fixed"
    :before-close="drawerFormsBeforeCloses"
    {{--  监测抽屉鼠标事件  --}}
    :wrapper-closable="mousedownClassBol"
    @mousedown.native="handleWrapperMousedown($event)"
    @mouseup.native="handleWrapperMouseup($event)"
    {{--  监测抽屉鼠标事件 End  --}}
    append-to-body
    v-cloak data-7512a93d
>
    <div>
        <el-row :gutter="24" type="flex" class="Va-drawer-main" v-cloak data-7512a93d :style="layouts.drawerFixedHeight">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form ref="create.model" :model="create.model" :rules="create.rules" label-position="top" size="medium" class="Va-forms" data-7512a93d v-cloak>
                    <el-form-item label="上级菜单" prop="parent_id"  whole-inline>
                        <el-cascader
                                placeholder="--请选择上级菜单--"
                                :options="parentsMenuItems"
                                v-model="create.model.parent_id"
                                :props="{expandTrigger:'hover', checkStrictly:true}"
                                style="width: 100%" clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="菜单名称" required prop="name">
                        <el-input v-model="create.model.name" placeholder="请填写菜单名称"></el-input>
                    </el-form-item>

                    <el-form-item label="菜单地址" required prop="path" >
                        <el-input v-model="create.model.path" placeholder="请填写菜单地址"></el-input>
                    </el-form-item>

                    <el-form-item label="菜单标识" prop="action" >
                        <el-input v-model="create.model.action" placeholder="相对父级菜单下的唯一标识"></el-input>
                    </el-form-item>

                    <el-form-item label="菜单图标" prop="icon">
                        <div class="icon-box">
                            <span v-if="create.model.icon">
                                <span class="icon-del"><i class="el-icon-close" @click="create.model.icon = ''"></i></span>
                                <i @click="openIconJurisdiction" v-model="create.model.icon" :class="create.model.icon"></i>
                                <span @click="openIconJurisdiction" class="icon-name">@{{ create.model.icon }}</span>
                            </span>
                            <span v-else>
                                <i @click="openIconJurisdiction" v-model="create.model.icon" class="el-icon-plus"></i>
                                <span @click="openIconJurisdiction" class="icon-name"><i class="el-icon-info icon-default"></i> 请选择图标</span>
                            </span>
                        </div>
                        @include('admin.framework.manage.menus.icons')
{{--                        <el-input v-model="create.model.icon" placeholder="请填写菜单图标"></el-input>--}}
                    </el-form-item>

                    <el-form-item label="菜单类型" prop="facility">
                        <el-radio-group v-model="create.model.facility" size="mini">
                            <el-radio-button label="1" value="1" key="1">访问类型</el-radio-button>
                            <el-radio-button label="2" value="2" key="2">操作类型</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

{{--                    <el-form-item label="菜单模型" prop="module" v-if="create.model.facility==1">--}}
{{--                        <el-switch v-model="create.model.module" active-text="使用" inactive-text="不使用"></el-switch>--}}
{{--                        <span class="Va-help-block" v-if="create.model.module" data-7512a93d>--}}
{{--                            <i class="fa fa-exclamation-circle"></i>--}}
{{--                            菜单创建成功后，可设置菜单模型；--}}{{--关于菜单模型可查看 <a href="">菜单模型操作文档</a>--}}
{{--                        </span>--}}
{{--                    </el-form-item>--}}

{{--                    <el-form-item label="模型类型" prop="type" v-if="create.model.facility==1 && create.model.module">--}}
{{--                        <el-radio-group v-model="create.model.module_type" size="mini">--}}
{{--                            <el-radio-button label="extend">列表数据</el-radio-button>--}}
{{--                            <el-radio-button label="page">单页数据</el-radio-button>--}}
{{--                            <el-radio-button label="tabs">标签页数据</el-radio-button>--}}
{{--                        </el-radio-group>--}}
{{--                    </el-form-item>--}}

{{--                    <el-form-item label="列表单页" prop="type" v-if="create.model.facility==1 && create.model.module && create.model.module_type=='extend'">--}}
{{--                        <el-switch v-model="create.model.extend_page" active-text="使用" inactive-text="不使用"></el-switch>--}}
{{--                    </el-form-item>--}}

                    <el-form-item label="操作菜单" prop="cud" v-if="!create.model.id && create.model.facility != 2 && create.model.module_type=='extend'">
                        <el-checkbox-group v-model="create.model.cud" size="mini">
                            <el-checkbox-button label="insert" key="insert">添加</el-checkbox-button>
                            <el-checkbox-button label="update" key="update">编辑</el-checkbox-button>
                            <el-checkbox-button label="remove" key="remove">删除</el-checkbox-button>
                            <el-checkbox-button label="status" key="status">状态</el-checkbox-button>
                            <el-checkbox-button label="export" key="export">导出</el-checkbox-button>
                            <el-checkbox-button label="deletion" key="deletion">批量删除</el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="菜单状态" prop="status">
                        <el-switch v-model="create.model.status" active-text="启用" inactive-text="禁用"></el-switch>
                    </el-form-item>

                    <el-form-item label="菜单排序" prop="sort">
                        <el-input-number v-model="create.model.sort" :min="1" :max="255" label="菜单排序"></el-input-number>
                        <va-forms-tips>数字越小越靠前</va-forms-tips>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <div slot="footer" class="Va-drawer-footer" data-7512a93d>
            <div class="Va-text-left" data-7512a93d>
                <el-button @click="drawerFormsSubmits" type="primary" size="medium" :loading="create.loading">
                    @{{create.loading ? '提交中...' : '提 交'}}
                </el-button>
                <el-button @click="drawerFormsCloses" size="medium">取 消</el-button>
            </div>
        </div>
    </div>


</el-drawer>
